// 获取元素
let canvas:HTMLCanvasElement=document.querySelector('canvas') as HTMLCanvasElement
// 创造2d画布
let ctx =canvas.getContext('2d') as CanvasRenderingContext2D
// 设置画布大小跟可视屏幕大小一致
canvas.width=screen.availWidth
canvas.height=screen.availHeight

let str:string="SDDFEWCMLML1101010"
// 把页面分为10个像素一列
let Arr=Array(Math.ceil(canvas.width/10)).fill(0)

const rain=()=>{
    // 绘制画布背景
    ctx.fillStyle='rgba(0,0,0,0.05)',
    ctx.fillRect(0,0,canvas.width,canvas.height)
    // 绘制文字的颜色
    ctx.fillStyle="#0f0"
    Arr.forEach((item,index)=>{
        // 绘制文字的位置和随机文字
        ctx.fillText(str[Math.floor(Math.random()*str.length)],index*10,item+10)
        // 判断是否超出设定的高度，超出就重置
        Arr[index]=item>canvas.height||item>Math.random()*10000?0:item+10
    })
}
setInterval(rain,44)